<template>
  <div class="echart-series-line">
    <FormItem
      :form="form"
      option="echart.series.smooth"
      :label="$demoi18n('echart.label.smoothCorners')"
      type="switch"
      serie-type="line"
    />
    <FormItem
      v-if="hasShadowProp"
      :form="form"
      option="shadow"
      :label="$demoi18n('label.shadow')"
      type="switch"
    />
    <FormItem
      :form="form"
      option="echart.series.lineStyle.type"
      :label="$demoi18n('echart.label.lineType')"
      type="select"
      :options="lineTypes"
      serie-type="line"
    />
    <FormItem
      :form="form"
      option="echart.series.lineStyle.width"
      :label="$demoi18n('echart.label.lineweight')"
      type="number"
      serie-type="line"
    />
    <FormItem
      :form="form"
      option="echart.series.lineStyle.opacity"
      :label="$demoi18n('echart.label.lineTransparency')"
      type="number"
      :step="0.01"
      :precision="2"
      serie-type="line"
    />
    <FormItem
      :form="form"
      option="echart.series._emptyName"
      :label="$demoi18n('panel.label.emptyValLine')"
      type="radio"
      :options="emptyNames"
      serie-type="line"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import { lineTypes, emptyNames } from '@/components/common/echart/form-item-options.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

export default {
  components: { FormItem },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      lineTypes,
      emptyNames,
    };
  },
  computed: {
    hasShadowProp() {
      const has = ['uniaxial-line', 'biaxial-line-line'].includes(this.componentName);
      return has;
    },
  },
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped></style>
